<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        body{
            
        }
        #address_ul li {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        	border-bottom: 1px solid #dfdfdf;
        }
        #address_ul li .address_a img {
        	width:24px;
        }
        #address_ul li .address_a {
        	padding-left: 10px;
        }
        #address_ul li .address_b {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	padding:10px;
        }
        #address_ul li .address_b .desc {
        	color:#999;
        	font-size: 14px;
        }

    </style>
</head>
<body>
    <ul id="address_ul">
<!--     	<li>
    		<div class="address_a">
    			<img src="../image/address_dot.png">
    		</div>
    		<div class="address_b">
    			<p>花园小区</p>
    			<p class="desc">珠海市香洲区翠香路221号</p>
    		</div>
    	</li> -->

    </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="dataTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
    	<li onclick="fnChosePoint({{=it[i]['geometry']['location']['lat']}},{{=it[i]['geometry']['location']['lng']}},'{{=it[i].name}}','{{=it[i].vicinity}}');" tapmode>
    		<div class="address_a">
    			<img src="../image/address_dot.png">
    		</div>
    		<div class="address_b">
    			<p>{{=it[i]['name']}}</p>
    			<p class="desc">{{=it[i]['vicinity']}}</p>
    		</div>
    	</li>
    {{ }; }}
</script>
<script id="data2Tpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
    	<li onclick="fnChosePoint2('{{=it[i].description}}','{{=it[i].place_id}}');" tapmode>
    		<div class="address_a">
    			<img src="../image/address_dot.png">
    		</div>
    		<div class="address_b">
    			<p>{{=it[i]['structured_formatting']['main_text']}}</p>
    			<p class="desc"></p>
    		</div>
    	</li>
    {{ }; }}
</script>
<script type="text/javascript">
    apiready = function(){
        lat = '';
        lng = '';
    	city_name = api.pageParam.city_name;
        var GoogleMap = api.require('googleMap');
        GoogleMap.getLocation(function(ret, err) {
            if (ret.status) {
                lat = ret.lat;
                lng = ret.lon;
                fngetAddressList(lat,lng);
            }
        });

        api.addEventListener({
            name: 'searchPointChangeEvent'
        }, function(ret, err) {
            if (ret) {
                var content = ret.value.content;
                if(content) {
                	getPointByKeyword(content);
                }else {
                	fngetAddressList(lat,lng);
                }
            }
        });
    };

    function fngetAddressList(lat,lng) {
    	openLoading();
    	api.ajax({
    	    url: 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?rankby=distance&location='+lat+','+lng+'&key=AIzaSyAavLUICIC0E7f5KfLAOZB56kvl7puPkzo&language=zh-CN',
    	    method: 'get',
    	    data: {
    	        values: { 
    	        },
    	    }
    	}, function(ret, err) {
    	    if (ret) {
    	        $('#address_ul').empty();
    	        appendDotData(ret['results'],'dataTpl','address_ul',true,false);
    	    } else {
    	        
    	    }
    	    closeLoading();
    	});
    }

    function fnChosePoint(lat,lng,name,addr) {
    	api.sendEvent({
    	    name: 'setPointEvent',
    	    extra: {
    	        lat: lat, 
    	        lng: lng,
    	        name:name,
    	        addr:addr
    	    }
    	});
    	api.closeWin();

    }
    function fnChosePoint2(name,place_id) {
    	openLoading();
    	api.ajax({
    	    url: 'https://maps.googleapis.com/maps/api/place/details/json?placeid='+place_id+'&key=AIzaSyAavLUICIC0E7f5KfLAOZB56kvl7puPkzo&language=zh-CN',
    	    method: 'get',
    	    data: {
    	        values: { 
    	        },
 
    	    }
    	}, function(ret, err) {
    	    if (ret) {
    	        api.sendEvent({
		    	    name: 'setPointEvent',
		    	    extra: {
		    	        lat: ret.result.geometry.location.lat, 
		    	        lng: ret.result.geometry.location.lng,
		    	        name:ret.result.name,
		    	        addr:ret.result.formatted_address
		    	    }
		    	});
		    	api.closeWin();
    	    } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
    	    }
    	    closeLoading();
    	});
    	// api.sendEvent({
    	//     name: 'setPointEvent',
    	//     extra: {
    	//         lat: lat, 
    	//         lng: lng,
    	//         name:name,
    	//         addr:addr
    	//     }
    	// });
    	// api.closeWin();

    }
    function getPointByKeyword(content) {

    	api.ajax({
    	    url: 'https://maps.googleapis.com/maps/api/place/queryautocomplete/json?input='+content+'&radius=1000&location='+lat+','+lng+'&key=AIzaSyAavLUICIC0E7f5KfLAOZB56kvl7puPkzo&language=zh-CN',
    	    method: 'get',
    	    data: {
    	        values: { 
    	        },

    	    }
    	}, function(ret, err) {
    	    if (ret) {
    	        $('#address_ul').empty();
                if(ret.status == 'OK') {
                    console.log(JSON.stringify(ret['predictions']));
    	           appendDotData(ret['predictions'],'data2Tpl','address_ul',true,false);
                }
    	    } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
    	    }
    	});
    }
</script>
</html>